<script setup>
// example components
import InfosCards from "./InfosCards.vue";
defineProps({
    image: {
        type: [String, Object],
        component: String,
        class: String,
        default: () => {},
    },
    title: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
    },
    description: {
        type: [String, Object],
        required: true,
        text: String,
        class: String,
        default: () => {},
    },
    imgLeft: {
        type: Boolean,
        default: true,
    },
    bgColor: {
        type: String,
        default: "",
    },
    bgImage: {
        type: String,
        default: "",
    },
    carImage: {
        type: String,
        default: "",
    },
    order: {
        type: Number,
        default: 1,
    },
});
</script>
<template>
    <!-- d-flex align-items-center -->
    <section :class="`position-relative d-flex align-items-center`">
        <div class="bg" :style="`background-image: url(${bgImage});background-size: cover;background-position: right bottom;transform: translate(0px, 0px);position-relative`">
            <div :class="`row  ${bgColor} ${imgLeft ? 'flex-row-reverse' : ''}`" style="height: 100%">
                <div :class="`col-lg-5 py-2 info${order}`" style="height: 100%">
                    <InfosCards data-aos="fade-up" data-aos-duration="2000" col="col-md-12" color="info" :title="title" :description="description" />
                </div>
                <div v-if="!imgLeft" class="col-lg-1"></div>
                <div :class="`col-lg-6 ${image.class ? image.class : 'p-0'} `">
                    <img :src="image" alt="" :class="`tire${order} position-absolute`" data-aos="fade-down" data-aos-duration="2000" />
                    <img v-if="carImage" :src="carImage" alt="" :class="`car${order} position-absolute`" :data-aos="`fade-${imgLeft ? 'right' : 'left'}`" data-aos-duration="2000" />
                </div>
            </div>
        </div>
    </section>
</template>
<style scoped>
@media (min-width: 0px) {
    .bg {
        height: 900px;
        padding: 0 1rem;
    }
    .car1 {
        width: 70%;
        bottom: 100px;
    }
    .tire1 {
        width: 50%;
        bottom: 100px;
    }

    .car2 {
        width: 100%;
        bottom: 100px;
    }
    .tire2 {
        width: 60%;
        bottom: 150px;
    }

    .tire5 {
        width: 40%;
        bottom: 150px;
        margin-left: 100px;
    }
}
@media (min-width: 991.98px) {
    .bg {
        height: 660px;
    }
    .car1 {
        max-width: 500px !important;
        bottom: 100px;
    }
    .tire1 {
        max-width: 375px !important;
        bottom: 100px;
        /* margin-top: calc(100% - 220px); */
    }

    .info1 {
        padding-left: 8rem;
    }

    .car2 {
        max-width: 700px !important;

        margin-left: 4rem;
        bottom: 100px;
    }
    .tire2 {
        max-width: 345px !important;
        margin-left: 4rem;
        bottom: 200px;
    }

    .info2 {
        padding-right: 8rem;
    }
    .tire5 {
        max-width: 345px !important;
        bottom: 150px;
        margin-left: 100px;
    }
    .info5 {
        padding-left: 8rem;
    }
}
@media (min-width: 1400px) {
    .bg {
        height: 960px;
    }
    .car1 {
        max-width: 750px !important;
        bottom: 100px;
    }
    .tire1 {
        max-width: 600px !important;
        bottom: 100px;
    }

    .info1 {
        padding-left: 12rem;
    }

    .car2 {
        max-width: 1050px !important;
        margin-left: 100px;
        bottom: 100px;
    }
    .tire2 {
        max-width: 500px !important;
        margin-left: 100px;
        bottom: 200px;
    }
    .info2 {
        padding-left: 12rem;
    }

    .tire5 {
        max-width: 500px !important;
        bottom: 150px;
        margin-left: 100px;
    }
    .info5 {
        padding-left: 12rem;
    }
}
</style>
